/**
{
"style":{
"navigationBarTitleText":"优惠券",
"navigationStyle": "default"
}
}
*/

<template>
	<!-- pb50 -->
	<view class="hh100 pb50">
		<xi-list-tabs ref="$list" class="bg#fff" :tabs="conf.tabs" v-model="select.status" :query="on.query"
			:scrollable="false" lineColor="#0F956E" activeStyle="color:#333333;font-size:32rpx"
			inactiveStyle="color:#909397;font-size:30rpx">
			<template #default="{ data }">
				<div class="list">
					<!-- item1 item2 item3 -->
					<template v-for="item in data">
						<view :class=" [item.state == '1'? 'item1': item.state == '2'? 'item2':'item3', 'item' ]"
							 :key="item.id" @click="jumpDetail(item)" v-if="item.info && item.info.name">
							<image src="__ROOT__/common/images/quan-bg.png" mode=""></image>
							<view class="cont flex-tbc">
								<view class="l1 flex-shrink">
									<view class="price">
										<text>￥</text>{{Number(item.info.price)}}
									</view>
									<view class="text">
										满{{Number(item.info.full)}}元可用
									</view>
								</view>
								<view class="l2">
									<view class="title">
										{{item.info.name}}
									</view>
									<view class="time">
										有效期至{{item.info.etime}}
									</view>
								</view>
								<view class="l3 flex-shrink">
									<view class="btn">
										{{item.state == 1? '立即使用':  item.state == 2? '已使用':'已过期'}}
									</view>
								</view>
							</view>


						</view>
					</template>
				</div>
			</template>
		</xi-list-tabs>
	</view>


</template>
<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	let conf = reactive({
		tabs: [{
				name: '全部',
				value: '',
				type: 1,
			},
			{
				name: '未使用',
				value: '1',
				type: 2,
			},
			{
				name: '已使用',
				value: '2',
				type: 3,
			},
			{
				name: '已过期',
				value: '3',
				type: 4,
			}
		],
		query: {},
	})

	let select = Vue.reactive({
		status: '',
	})

	let on = {
		async query(req) {

			let res = await $post("/user/user_coupon", {
				...req,
				state: select.status
			})

			const obj = {
				data: res.list
			}

			return obj
		},
	}

	const jumpDetail = (item) => {
		if (item.state != 1) return
		uni.switchTab({
			url: '/pages/main/yanche'
		})
	}
	Vue.onShow(() => {

	})
	Vue.onLoad(() => {})
</script>
<style scoped lang='scss'>
	.item {
		width: 702rpx;
		height: 216rpx;
		margin: 0 auto;
		margin-top: 22rpx;
		position: relative;
		padding-right: 26rpx;

		&.item1 {
			.l1 {
				color: #0F956E;
			}

			.l2 {
				.title {
					color: #1D2129;
				}

				.time {
					color: #86909C;
				}
			}

			.btn {
				border: 1rpx solid #0F956E;
				color: #0F956E;
			}
		}

		&.item2 {
			.l1 {
				color: rgba(15, 149, 110, 0.4);
			}

			.l2 {
				.title {
					color: #7D7D7D;
				}

				.time {
					color: #BDBDBD;
				}
			}

			.btn {
				border: 1rpx solid rgba(15, 149, 110, 0.4);
				color: rgba(15, 149, 110, 0.4);
			}
		}

		&.item3 {
			.l1 {
				color: #BDBDBD;
			}

			.l2 {
				.title {
					color: #BDBDBD;
				}

				.time {
					color: #BDBDBD;
				}
			}

			.btn {
				border: 1rpx solid #BDBDBD;
				color: #BDBDBD;
			}
		}

		.btn {
			width: 150rpx;
			height: 62rpx;
			border-radius: 54rpx 54rpx 54rpx 54rpx;
			font-family: OPPOSans, OPPOSans;
			font-weight: 500;
			font-size: 26rpx;
			line-height: 60rpx;
			text-align: center;
			margin-left: auto;
		}

		image {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1;
		}

		.cont {
			position: relative;
			z-index: 2;
			width: 100%;
			height: 100%;
			padding-left: 10rpx;

			.l1 {
				min-width: 190rpx;
				position: relative;

				&::after {
					display: block;
					content: "";
					width: 1px;
					height: 120rpx;
					background-color: #E5E6EB;
					position: absolute;
					right: 0;
					top: -10px;
				}

				.price {
					font-family: Arial, Arial;
					font-weight: bold;
					font-size: 68rpx;
					line-height: 44rpx;
					text-align: center;


					text {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 36rpx;
						line-height: 44rpx;
					}
				}

				.text {
					font-family: OPPOSans, OPPOSans;
					font-weight: 400;
					font-size: 24rpx;
					line-height: 32rpx;
					margin-top: 10rpx;
					text-align: center;
				}
			}

			.l2 {
				margin-left: 46rpx;

				.title {
					font-family: OPPOSans, OPPOSans;
					font-weight: 400;
					font-size: 34rpx;
					line-height: 44rpx;
				}

				.time {
					font-family: OPPOSans, OPPOSans;
					font-weight: 400;
					font-size: 24rpx;
					line-height: 32rpx;
					margin-top: 18rpx;
				}
			}

			.l3 {
				margin-left: auto;

			}
		}
	}
</style>